<template>
  <contentModel v-if="visible" :title="props.title" @close="closeModal">
    <div class="module-con">
      <a-form
        ref="formRef"
        :model="form"
        layout="vertical"
        :rules="rules"
        @submit="handleSubmit"
      >
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="secretLevel" label="密级">
              <secretLevelSelect
                v-model="form.secretLevel"
                :is-show-clear-tip="true"
                style="width: 100%"
              />
              <!-- @change="secretLevelChange" -->
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="mdsItemType"
              label="物料类型"
              :disabled="props.title === '编辑'"
            >
              <dict-select
                v-model="form.mdsItemType"
                allow-clear
                dict-type="mdsType"
                placeholder="请选择"
              ></dict-select>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="sysOrderNo" label="系统订单编号">
              <!-- <inputModal
                v-model="form.sysOrderNo"
                :label-value="form.sysOrderNo"
                :value-name="'name'"
                :title="'供应商编码：'"
                :type="'supplyName'"
              /> -->
              <a-input v-model="form.sysOrderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="transactionCode" label="入库流水号">
              <a-input v-model="form.transactionCode"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="missionNo" label="任务编号">
              <a-input v-model="form.missionNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="barCode" label="条码号">
              <a-input v-model="form.barCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="prtlotNo" label="质量编号">
              <a-input v-model="form.prtlotNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="pmsReceiveQty" label="到货数量">
              <a-input v-model="form.pmsReceiveQty"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="inboundTime" label="入库日期">
              <a-date-picker
                v-model="form.inboundTime"
                style="width: 100%"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="qualifiedQty" label="验收合格数量">
              <a-input v-model="form.qualifiedQty"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="outCheckLossQty" label="厂外消耗数量">
              <a-input v-model="form.outCheckLossQty"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="note" label="备注">
              <a-input v-model="form.note"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <template #footer>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </contentModel>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, reactive, defineAsyncComponent } from 'vue';
  // import inputModal from '@/common/components/search-modal/input-modal.vue';
  import { addQueryPage, editQueryPage } from '@/api/payment/estimatedInfor';
  import { Message } from '@arco-design/web-vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import dictSelect from '@/common/components/dict-select/index.vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const loading = ref(false);
  // eslint-disable-next-line vue/require-prop-types
  const props = defineProps(['title']);
  let form = reactive({
    secretLevel: '',
    sysOrderNo: '',
    transactionCode: '',
    missionNo: '',
    barCode: '',
    prtlotNo: '',
    pmsReceiveQty: '',
    outCheckLossQty: '',
    note: '',
    inboundTime: '',
    qualifiedQty: '',
    mdsItemType: '2',
  });
  // const showModal = ref(false);
  const init = (val: any) => {
    console.log(`output--------------val`, val);
    form = val;
  };
  const formRef = ref();
  const rules = {
    secretLevel: [
      {
        required: true,
        message: '请选择密级',
      },
    ],
    sysOrderNo: [
      {
        required: true,
        message: '请输入系统订单编号',
      },
    ],
    transactionCode: [
      {
        required: true,
        message: '请输入入库流水号',
      },
    ],
    missionNo: [
      {
        required: true,
        message: '请输入任务编号',
      },
    ],
    prtlotNo: [
      {
        required: true,
        message: '请输入质量编号',
      },
    ],
    inboundTime: [
      {
        required: true,
        message: '请选择入库日期',
      },
    ],
    mdsItemType: [
      {
        required: true,
        message: '请选择物料类型',
      },
    ],
  };
  const visible = ref(true);
  const emit = defineEmits(['handleCancel', 'update:modelValue']);
  const handleSubmit = () => {
    formRef.value.validate(async (validate: any) => {
      if (!validate) {
        loading.value = true;
        if (form?.id) {
          await editQueryPage(form);
          Message.success({
            content: '编辑成功！',
            duration: 5 * 1000,
          });
        } else {
          await addQueryPage(form);
          Message.success({
            content: '保存成功！',
            duration: 5 * 1000,
          });
        }
        loading.value = false;
        cancel();
      }
    });
  };
  const cancel = () => {
    visible.value = false;
    emit('update:modelValue', false);
    emit('handleCancel');
  };
  const closeModal = () => {
    formRef.value.resetFields();
    emit('update:modelValue', false);
  };
  // const secretLevelChange = () => {
  //   // formRef.value.resetFields();
  // };

  defineExpose({ init });
</script>
